<template>
    <div 
    v-loading="loading"
    @dragenter.prevent="toggleActive"
    @dragleave.prevent="toggleActive"
    @dragover.prevent
    @drop.prevent="dropFile"    
    :class="{ 'active-dropzone': active }"
    class="dropzone">
        <span> <el-icon :size="40"><DocumentCopy /></el-icon></span>
        <span>拖放mp3文件到这里</span>
        <span>或</span>
        <el-button type="primary" @click="selectFiles"> 点击选择文件 </el-button>
    </div>
</template>

<script>
import { ref } from 'vue';
export default ({
    name:"FileDrop",
    props: {
        loading:{
            type: Boolean,
            default: false
        }
    },
    setup(props,{emit}) {
        const active = ref(false)
        const toggleActive = ()=> {
            active.value = !active.value;
        }
        const getFileNameFromPath = (filePath) =>{
            const splitChar="\\"
            const array = filePath.split(splitChar)
            return array[array.length-1]
        }
        const selectFiles = async () =>{
            const filePaths = await window.electronAPI.showOpenDialog({
                filters:[{name: 'Audio', extensions: ['mp3']}],
                properties: ['openFile','multiSelections']
            })
            if(filePaths){
                let files=[]
                filePaths.forEach(file=>{
                    files.push({
                        path:file,
                        name:getFileNameFromPath(file)
                    })
                })
                emit('fileSelected',files)
            }
        }
        const dropFile = (e) => {
            toggleActive()
            const files=e.dataTransfer.files
            let filterFiles=[]
            for(var i=0;i<files.length;i++){
                const file=files[i]
                if(file.type ==='audio/mpeg') {
                  filterFiles.push({
                    name:file.name,
                    path:file.path
                  })
                }
            }
            if(filterFiles.length<1) return
            emit('fileSelected',filterFiles)
        }
        return {
            active,toggleActive,dropFile,selectFiles
        }
    }
})
</script>

<style scoped lang="scss">
.dropzone{
    width: 400px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 10px;
    border: 2px dashed #dcdfe6;
    background-color: #fff;
    transition: 0.3s ease all;
    color: #606266;
    font-size: 14px;
    label {
        width: 200px;
        padding: 6px 12px;
        border-radius: 4px;
        color: #fff;  
        background-color: #409eff;
        transition: 0.3s ease all;  
        cursor:pointer;
        &:hover{
           background-color: #79bbff;
        }
    }
    input {
        display: none;
    }
}

.active-dropzone{
    color:#fff;
    border-color: #fff;
    background-color: #409eff;

    i{
        color: #fff;
    }

    label{
        background-color: #fff;
        color: #409eff;  
    }
}
</style>
